<template>
  <div class="cont">
    <div class="top">
        <van-icon name="arrow-left" @click="fun"/>
        <p>【华硕好屏】华硕灵耀轻薄新品_华硕商城</p>
        <van-icon name="ellipsis" />
    </div>




    <div class="box">
        <img :src="imgs[0]" alt="" class="img1">
        <img :src="imgs[1]" alt="" class="img1">
        <!-- 灵耀14 -->
        <img :src="data1[0].title" alt="" class="img1">
        <img :src="data1[0].img1" alt="" class="img1">

        <div class="box1">
            <div class="box2" v-for="(v,index) in data1" :key="index">
                <img :src="v.myimg" alt="" @click="qqq(index)">
                <h4>&nbsp;&nbsp;{{v.urname}}</h4>
                <p>&nbsp;&nbsp;{{v.introduce}}</p>
                <div class="sss">赠品</div>
                <div class="liji">
                    <span>&nbsp;&nbsp;￥{{v.moeny}}</span>
                    &nbsp;&nbsp;<del>￥{{v.before}}</del>
                    <div class="qg">立即抢购</div>
                </div>
            </div>
        </div>

        <!-- 灵耀x双屏 -->
        <img :src="v" alt="" v-for="(v,index) in twoimg" :key="index" class="img1">

        <!-- 灵耀pro -->

        <img :src="data2[0].title" alt="" class="img1">
        <img :src="data2[0].img1" alt="" class="img1">
        
        <div class="box1">
            <div class="box2" v-for="(v,index) in data2" :key="index">
                <img :src="v.myimg" alt="" @click="fun2(index)">
                <h4>&nbsp;&nbsp;{{v.urname}}</h4>
                <p>&nbsp;&nbsp;{{v.introduce}}</p>
                <div class="sss">赠品</div>
                <div class="liji">
                    <span>&nbsp;&nbsp;￥{{v.moeny}}</span>
                    <del>&nbsp;&nbsp;￥{{v.before}}</del>
                    &nbsp;&nbsp; <div class="qg">立即抢购</div>
                </div>
            </div>
        </div>

        <!-- 灵耀x13 -->
        <img :src="data3[0].title" alt="" class="img1">
        <img :src="data3[0].img1" alt="" class="img1">
        
        <div class="box1">
            <div class="box2" v-for="(v,index) in data3" :key="index">
                <img :src="v.myimg" alt="" @click="fun3(index)">
                <h4>&nbsp;&nbsp;{{v.urname}}</h4>
                <p>&nbsp;&nbsp;{{v.introduce}}</p>
                <div class="sss">赠品</div>
                <div class="liji">
                    <span>&nbsp;&nbsp;￥{{v.moeny}}</span>
                    &nbsp;&nbsp;<del>￥{{v.before}}</del>
                    <div class="qg">立即抢购</div>
                </div>
            </div>
        </div>

        <!-- 更多推荐 -->

        <img :src="data4[0].title" alt="" class="img1">
        <img :src="data4[0].img1" alt="" class="img1">
        
        <div class="box1">
            <div class="box2" v-for="(v,index) in data4" :key="index">
                <img :src="v.myimg" alt="" @click="fun4(index)">
                <h4>&nbsp;&nbsp;{{v.urname}}</h4>
                <p>&nbsp;&nbsp;{{v.introduce}}</p>
                <div class="sss">赠品</div>
                <div class="liji">
                    <span>&nbsp;&nbsp;￥{{v.moeny}}</span>
                    &nbsp;&nbsp;<del>￥{{v.before}}</del>
                    <div class="qg">立即抢购</div>
                </div>
            </div>
        </div>






    </div>

  </div>
</template>

<script>
export default {
    data() {
        return {
            imgs: [],
            data1: [],
            data2: [],
            twoimg: [],
            data3: [],
            data4:[]
        }
    },
    mounted() {
        this.$http({
            url:"http://localhost:3000/navigation1"
        }).then(res => {
            console.log(res.data[0].data);
            this.imgs = res.data[0].data.img
            this.data1 = res.data[0].data.data1
            this.twoimg = res.data[0].data.twoimg
            this.data2 = res.data[0].data.data2
            this.data3 = res.data[0].data.data3
            this.data4 = res.data[0].data.data4
            
        })
    },
    methods: {
        fun() {
            this.$router.push({
                path:"/home"
            }).catch(err=>err)
        },
        qqq(index) {
            this.$router.push({
                path: "/content",
                query: {
                    data1: this.data1[index],
                    id:0
                }
            }).catch(err=>err)
        },
        fun2(index) {
            this.$router.push({
                path: "/content",
                query: {
                    data1: this.data2[index],
                    id:0
                }
            }).catch(err => err)
        },
        fun3(index) {
            this.$router.push({
                path: "/content",
                query: {
                    data1: this.data3[index],
                    id:0
                }
            }).catch(err => err)
        },
        fun4(index) {
            this.$router.push({
                path: "/content",
                query: {
                    data1: this.data4[index],
                    id:0
                }
            }).catch(err => err)
        }
    }
}
</script>

<style lang="scss" scoped>
.cont{
    background-color: #f4f2f3;

    .box{
        height: 500vw;
        width: 95vw;
        margin: auto;
        background-color: #f4f2f3;

        .box1{
            width: 95vw;
            margin-top: 4vw;
            display: flex;
            background-color: #f4f2f3;

            .box2{
            width: 44vw;
            height: 78vw;
            background-color: white;
            margin-left: 2vw;
            img{
                width: 44vw;
            }
            h4{
                margin: 0;
                font-size: 4.8vw;
                font-weight: normal;
            }
            p{
                margin: 0;
                font-size: 3.8vw;
                color: #8d9eb0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .sss{
                width: 12vw;
                height: 6vw;
                background-color: #f5a623;
                color: white;
                font-size: 3.6vw;
                line-height: 6vw;
                text-align: center;
                margin-left: 2vw;
            }
            .liji{
                width: 44vw;
                height: 12vw;
                span{
                    display: block;
                    color: red;
                    font-size: 4.6vw;
                }
                del{
                    font-size: 4vw;
                    color: #8da1c6;
                }
                .qg{
                    float: right;
                    font-size: 3vw;
                    width: 9vw;
                    height: 9vw;
                    background-color: #f9453d;
                    color: white;
                    text-align: center;
                    border-radius: 2vw;
                    margin-right: 2vw;
                }
            }

            }
        }





        .img1{
            width: 95vw;
            display: block;
            margin: auto;
            margin-top: 3vw;
        }
    }



    
    .top{
        width: 100vw;
        position: fixed;
        top: 0;
        height: 12vw;
        background-color: #e8e8e8;
        display: flex;
        justify-content: space-around;
        align-items: center;
        p{
            margin: 0;
            
        }
    }
}
</style>